import React, { Component } from "react"
import "./shopCarBotom.modules.less"
import { Badge } from 'antd-mobile'
import { Modal, List, Button } from 'antd-mobile';
import ShopCarInfoBar from "@/components/shopCarInfoBar/shopCarInfoBar.js"
import Step from "@/components/step/step.js"
const Fragment = React.Fragment
class ShopCarBottom extends Component {
    constructor(props) {
        super(props)
        this.state = {
            shopCardModal: false,
        }
    }
    showShopCardModal() {
        this.setState({
            shopCardModal: !this.state.shopCardModal,
        })
    }

    onClose = () => {
        this.setState({
            shopCardModal: false,
        })
    }
    render() {
        return (
            <Fragment>
                <div className='footer'>
                    <div className='shopCard'>
                        <div className='shopImage active'
                            onClick={this.showShopCardModal.bind(this)}
                        >
                            <div className='badgeWrap'>
                                <Badge text="99" hot />
                            </div>
                        </div>
                    </div>
                    <div className='infoBar'
                        hidden={this.state.shopCardModal}
                    >
                        <ShopCarInfoBar></ShopCarInfoBar>
                    </div>

                    <div className="barInfo">
                        <div className='infoText' hidden>未选购商品</div>
                        <div className="price">￥18.5</div>
                    </div>
                    <div className='btn active'>
                        去结算
                </div>
                </div>
                {/*购物车选择弹窗*/}
                <Modal
                    popup
                    visible={this.state.shopCardModal}
                    onClose={this.onClose}
                    animationType="slide-up"
                    className='shopCardModal'
                >
                    <div className='shopCardWrap'>
                        <ShopCarInfoBar></ShopCarInfoBar>
                        <div className="showBar">
                            已经选商品
                            <div className='deleteBtn'>清空购物车</div>
                        </div>
                        <div className='goodItemWrap'>
                            <div className='shopItem'>
                                <div className='goodsInfo'>
                                    <div className='goodName'>商品的商品的标题商品的标题商品的标题标题</div>
                                    <div className='goodInfo'>微辣</div>
                                </div>
                                <div className='goodPrice'>￥18.5</div>
                                <div className='goodStep'>
                                    <Step></Step>
                                </div>
                            </div>
                        </div>
                        <div className='goodItemWrap'>
                            <div className='shopItem'>
                                <div className='goodsInfo'>
                                    <div className='goodName'>商品的商品的标题商品的标题商品的标题标题</div>
                                    <div className='goodInfo'>微辣</div>
                                </div>
                                <div className='goodPrice'>￥18.5</div>
                                <div className='goodStep'>
                                    <Step></Step>
                                </div>
                            </div>
                        </div>
                        <div className='goodItemWrap'>
                            <div className='shopItem'>
                                <div className='goodsInfo'>
                                    <div className='goodName'>商品的商品的标题商品的标题商品的标题标题</div>
                                    <div className='goodInfo'>微辣</div>
                                </div>
                                <div className='goodPrice'>￥18.5</div>
                                <div className='goodStep'>
                                    <Step></Step>
                                </div>
                            </div>
                        </div>
                    </div>
                </Modal>
            </Fragment>
        )
    }
}

export default ShopCarBottom